<template>
    <div class="wrapper">
        <swiper ref="mySwiper" :options="swiperOptions" v-if="showSwiper">
            <swiper-slide v-for="item of list" :key="item.id">
                <img class="swiper-img" :src="item.imgUrl"/>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>

    </div>
</template>
<script>
export default {
    name: "HomeSwiper",
    data () {
        return {
            // 类似于使用该插件所需要的规则
            swiperOptions: {
                pagination: '.swiper-pagination',
                loop: true
            },
            // swiperList: [{
            //     id:'0001',
            //     imgUrl:'https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/202011/fe2fdee10d4336896f2be5b93e46783b.jpg_890x330_cbd040a2.jpg'
            // },
            // {
            //     id:'0002',
            //     imgUrl:'https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/202010/71aee5e88b957d214b56ce5c820a80f9.JPEG_890x330_ff06e10c.jpeg'
            // }]
        }
    },
    props: {
        list: Array
    },
    // 7-9补充内容 作用是使得初始化显示的轮播图不是最后一张
    computed: {
        showSwiper () {
            return this.list.length
        }
    }
}
</script>

<style lang="stylus" scoped>
    // >>> 使之穿透，令以下样式不仅仅影响当前页面
    .wrapper >>> .swiper-pagination-bullet-active
        background: #fff
    .wrapper
        overflow: hidden
        width: 100%
        height: 0
        padding-bottom: 31%
        background: #eee
        .swiper-img
            width: 100%

</style>